<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorate="~{admin/common/common}">
<head>
<title>新增管理员</title>
</head>
<body layout:fragment="content">
	<article class="page-container">
		<form class="form form-horizontal" id="form-door-user-add">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">服务</label>
				<div class="formControls col-xs-8 col-sm-9">
					<div id="serviceSelect"></div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>名称</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder=""
						id="name" th:name="name" />
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>性别</label>
				<div class="formControls col-xs-8 col-sm-9 skin-minimal">
					<div class="radio-box">
						<input type="radio" id="sex-1" checked="checked" th:name="sex"
							th:value="1" /> <label for="sex-1">男</label>
					</div>
					<div class="radio-box">
						<input type="radio" id="sex-2" name="sex" th:name="sex"
							th:value="0" /> <label for="sex-2">女</label>
					</div>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">手机号码</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder=""
						id="phone" name="phone" th:name="phone" />
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">出生日期</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" style="width: 120px;" class="input-text Wdate"
						th:name="birthDay" id="d28" onFocus="WdatePicker({lang:'zh-cn'})" />
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="submit" value="提交" />
				</div>
			</div>
		</form>
	</article>
	<script type="text/javascript" th:src="@{/js/business/door/add.js}"></script>
	<script type="text/javascript" th:inline="javascript">

$.fn.serviceSelect = function(parks){
	let _self = this;
	//定义3个默认值
	_self.data("province",["请选择园区", ""]);
	_self.data("city1",["请选择服务", ""]);
	//插入3个空的下拉框
	_self.append("<select name='parkId'></select>");
	_self.append("<select name='serviceId'></select>");
	//分别获取3个下拉框
	let $sel1 = _self.find("select").eq(0);
	let $sel2 = _self.find("select").eq(1);
	//默认省级下拉
	if(_self.data("province")){
		$sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
	}
	$.each( parks , function(index,data){
	
		$sel1.append("<option value='"+data.parkCode+"'>"+data.parkName+"</option>");
	});
	//默认的1级城市下拉
	if(_self.data("city1")){
		$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
	}
	//省级联动 控制
	let index1 = "" ;
	$sel1.change(function(){
		//清空其它2个下拉框
		$sel2[0].options.length=0;
		index1 = this.selectedIndex;
		if(index1== 0){	//当选择的为 “请选择” 时
			if(_self.data("city1")){
				$sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
			}
		}else{
			let value = this.value;
			$.ajax({
				type: 'get',
				url:"/doorUser/findEdgeServiceByParkId?parkId=" + value,
				success:function(apiResponse){
					if(apiResponse.code === "0000"){
						let GT = apiResponse.data;
						$.each( GT , function(index,data){
							$sel2.append("<option value='"+data.serviceId+"'>"+data.serviceName+"</option>");
						});
					}
		        }
			});
			
		}
	}).change();
	return _self;
};


$(function(){
	let parks = [[${parks}]];
	if(!parks){
		parks = [];
	}
	$("#serviceSelect").serviceSelect(parks);
});
</script>
</body>
</html>